<template>
  <el-menu class="el-menu-vertical-demo" :router="true">
    <el-menu-item index="male" class="col">
      <span slot="title">男生类</span>
    </el-menu-item>
    <el-menu-item index="female" class="col">
      <span slot="title">女生类</span>
    </el-menu-item>
    <el-menu-item index="publication" class="col">
      <span slot="title">出版物</span>
    </el-menu-item>
  </el-menu>
</template>
<style scoped>
span {
  font-size: 18px;
  font-weight: 800;
  line-height: 70px;
}
.col {
  height: 70px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid#ccc;
  background-color: white;
}
.col:hover {
  color: white;
  background-color: black;
}
.el-menu-vertical-demo {
  margin-top: 50px;
}
</style>

